<div id="containeredit">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="ntModalLabel">{:lang("add/change_container")}</h4>
    </div>
    <div class="modal-body">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="alert alert-dismissable alert-info">
                    <button type="button" class="close">×</button>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#edit_base" data-toggle="tab">{:strtoupper(lang('basic_information'))}</a>
                    </li>
                    <li>
                        <a href="#edit_more" data-toggle="tab">{:strtoupper(lang('feed_content'))}</a>
                    </li>
                    <li>
                        <a href="#edit_info" data-toggle="tab">{:strtoupper(lang('container_information'))}</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row tab-content">
            <div class="col-md-12 tab-pane active" id="edit_base">
                <table class="table table-hover ntTable">
                    <tbody>
                    <tr>
                        <td>{:strtoupper(lang('name'))}<span class="required"></span></td>
                        <td><input type="text" class="form-control" :disabled="statusdisable" v-model="data.name"
                                   value=""></td>
                        <td>{:strtoupper(lang('voyage'))}</td>
                        <td>{:strtoupper(lang('CHINA'))} >> {:strtoupper(lang('BRASIL'))}</td>
                    </tr>
                    <tr>
                        <td>{:strtoupper(lang('preparation_date'))}<span class="required"></span></td>
                        <td>
                            <div class="input-group date form_datetime ready_day" data-link-field="ready_day">
                                <input class="form-control" type="text" name="ready_day" :disabled="statusdisable"
                                       ref="ready_day" v-model="data.ready_day">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"
                                                                      style="margin:0"></span></span>
                            </div>
                            <input type="hidden" id="ready_day" value=""/>
                        </td>
                        <td>{:strtoupper(lang('container_type'))}</td>
                        <td>
                            <select class="form-control" name="type_id" :disabled="statusdisable"
                                    v-model="data.type_id">
                                <option value="0" selected>{:lang('please_select')}</option>
                                <option :value="item.id" v-for="(item,index) in container_type">
                                    {{item.name}}
                                </option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>{:strtoupper(lang('place_of_departure'))}</td>
                        <td>
                            <select class="form-control" name="port_start" :disabled="statusdisable"
                                    v-model="data.port_start">
                                <option value="0" selected>{:lang('please_select')}</option>
                                <option :value="item.id" v-for="(item,index) in port_start">
                                    {{item.name}}
                                </option>
                            </select>
                        </td>
                        <td>{:strtoupper(lang('goods_loan'))}</td>
                        <td>
                            <select class="form-control" name="co_id_start" :disabled="statusdisable"
                                    v-model="data.co_id_start">
                                <option value="0" selected>{:lang('please_select')}</option>
                                <option :value="item.id" v-for="(item,index) in co_id_start">
                                    {{item.name}}
                                </option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>{:strtoupper(lang('destination'))}</td>
                        <td>
                            <select class="form-control" name="port_arrival" :disabled="statusdisable"
                                    v-model="data.port_arrival">
                                <option value="0" selected>{:lang('please_select')}</option>
                                <option :value="item.id" v-for="(item,index) in port_arrival">
                                    {{item.name}}
                                </option>
                            </select>
                        </td>
                        <td>{:strtoupper(lang('goods_loan'))}</td>
                        <td>
                            <select class="form-control" name="co_id_arrival" v-model="data.co_id_arrival">
                                <option value="0">{:lang('please_select')}</option>
                                <option :value="item.id" v-for="(item,index) in co_id_arrival">
                                    {{item.name}}
                                </option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>费用</td>
                        <td><input class="form-control" type="text" name="cost" v-model="data.cost"></td>

                        <td>{:strtoupper(lang('edit'))}</td>
                        <td colspan="3"><span>{{data.update_name}}/{{data.update_date}}</span></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-md-12 tab-pane" id="edit_more">
                <table class="table table-hover ntTable">
                    <tbody>
                    <tr>
                        <td>{:strtoupper(lang('carrier'))}</td>
                        <td>
                            <select class="form-control" name="carrier_id" v-model="data.carrier_id">
                                <option value="0">{:lang('please_select')}</option>
                                <option :value="item.id" v-for="(item,index) in carrier">
                                    {{item.content}}
                                </option>
                            </select>
                        </td>
                        <td>{:strtoupper(lang('booking_number'))}</td>
                        <td><input type="text" name="so_no" v-model="data.so_no" value="" class="form-control" value="">
                        </td>
                    </tr>
                    <tr>
                        <td>{:strtoupper(lang('container_number'))}</td>
                        <td><input type="text" name="container_no" v-model="data.container_no" value=""
                                   class="form-control" value=""></td>
                        <td>{:strtoupper(lang('seal_number'))}</td>
                        <td><input type="text" name="seal_no" v-model="data.seal_no" value="" class="form-control"
                                   value=""></td>
                    </tr>
                    <tr>
                        <td>{:strtoupper(lang('overweight'))}</td>
                        <td><input type="text" name="weight" v-model="data.weight" value="" class="form-control"
                                   value=""></td>
                        <td>{:strtoupper(lang('bill_of_lading'))}</td>
                        <td><input type="text" name="bl_no" v-model="data.bl_no" value="" class="form-control" value="">
                        </td>
                    </tr>
                    <tr>
                        <td>{:strtoupper(lang('sailing_date'))}</td>
                        <td>
                            <div class="input-group date form_datetime etd_day" data-link-field="etd_day">
                                <input class="form-control" type="text" name="etd_day" ref="etd_day"
                                       v-model="data.etd_day" value="">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"
                                                                      style="margin:0"></span></span>
                            </div>
                            <input type="hidden" id="etd_day" value=""/>
                        </td>
                        <td>{:strtoupper(lang('date_of_arrival'))}</td>
                        <td>
                            <div class="input-group date form_datetime eta_day" data-link-field="eta_day">
                                <input class="form-control" type="text" name="eta_day" ref="eta_day"
                                       v-model="data.eta_day" value="">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"
                                                                      style="margin:0"></span></span>
                            </div>
                            <input type="hidden" id="eta_day" value=""/>
                        </td>

                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-md-12 tab-pane" id="edit_info">
                <table class="table table-hover ntTable">
                    <tbody>
                    <tr>
                        <td>{:strtoupper(lang('container_ID'))}</td>
                        <td>{{formatUnit(data.id,'ID')}}</td>
                        <td>{:strtoupper(lang('status'))}</td>
                        <td>{{data.status}}</td>
                    </tr>
                    <tr>
                        <td>{:strtoupper(lang('name'))}</td>
                        <td>{{data.name}}</td>
                        <td>{:strtoupper(lang('serial_number'))}</td>
                        <td>{{data.code}}</td>
                    </tr>
                    <tr>
                        <td>{:strtoupper(lang('feed_content'))}</td>
                        <td colspan="3">{:strtoupper(lang('bill_of_lading'))}:{{data.bl_no}} /
                            {:lang("carrier")}：{{data.carrier_id_name}} /
                            {:lang("container_number")}：{{data.container_no}} / {:lang("seal_number")}: {{data.seal_no}}
                            / 过磅重:{{formatUnit(data.weight,'KGS')}} KGS /
                            {:lang("box_quantity")}：{{formatUnit(data.sum_ctn,'CTN')}} CTN
                        </td>
                    </tr>
                    <tr>
                        <td>{:strtoupper(lang('total'))}</td>
                        <td colspan="3">
                            {:strtoupper(lang('weight'))}： {{formatUnit(data.sum_kgs,'KGS')}} <span
                                class="unit">KGS</span> /
                            {:strtoupper(lang('box_quantity'))}：{{formatUnit(data.sum_ctn,'CTN')}} <span class="unit">CTN</span>
                            /
                            体积：{{formatUnit(data.sum_cbm,'CBM')}} <span class="unit">CBM</span> /
                            {:strtoupper(lang('goods_value'))}：{{formatUnit(data.sum_value,'CNY')}} <span class="unit">CNY</span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span
                class="glyphicon glyphicon-remove"></span>{:lang('cancel')}
        </button>
        <button :disabled="isdisadble" type="button" @click="savebtn" class="btn btn-primary"
                style="padding-left:24px;padding-right:24px"><span class="glyphicon glyphicon-floppy-disk"></span>{:lang('save')}
        </button>
    </div>
    <input type="hidden" id="containerid" name="id" value="{$id}">
</div>
<script>
    var table = new Vue({
        el: '#containeredit',
        data: () => ({
            data: [],
            container_type: [],
            port_start: [],
            port_arrival: [],
            co_id_start: [],
            co_id_arrival: [],
            carrier: [],
            isdisadble: false,
            statusdisable: false,
        }),
        methods: {
            formatUnit: formatUnit,
            getalldata(){
                $('.loding').show();
                $.ajax({
                    url: '/admin/logistics/containeredit',
                    data: {
                        geteditinfo: '',
                        id: $('#containerid').val()
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        if (data.info.eta_day == 0) {
                            data.info.eta_day = ''
                        }
                        if (data.info.etd_day == 0) {
                            data.info.etd_day = ''
                        }
                        if (data.info.ready_day == 0) {
                            data.info.ready_day = ''
                        }
                        if ([3, 4, 5, 6].indexOf(data.info.num) != -1) {
                            this.statusdisable = true;
                        }
                        this.data = data.info;
                        this.container_type = data.container_type;
                        this.port_start = data.port_start;
                        this.port_arrival = data.port_arrival;
                        this.co_id_start = data.co_id_start;
                        this.co_id_arrival = data.co_id_arrival;
                        this.carrier = data.carrier;
                        $('.loding').hide();
                    }
                })
            },
            savebtn(){
                this.isdisadble = true;
                if (this.data.ready_day == '') {
                    this.data.ready_day = 0;
                }
                //开航时间
                if (this.data.etd_day == '') {
                    this.data.etd_day = 0;
                }
                //抵达时间
                if (this.data.eta_day == '') {
                    this.data.eta_day = 0;
                }
                var dataupdate = {
                    id: this.data.id,
                    name: this.data.name,
                    ready_day: this.data.ready_day,
                    type_id: this.data.type_id,
                    port_start: this.data.port_start,
                    co_id_start: this.data.co_id_start,
                    port_arrival: this.data.port_arrival,
                    co_id_arrival: this.data.co_id_arrival,
                    cost: this.data.cost,
                    carrier_id: this.data.carrier_id,
                    so_no: this.data.so_no,
                    container_no: this.data.container_no,
                    seal_no: this.data.seal_no,
                    weight: this.data.weight,
                    bl_no: this.data.bl_no,
                    etd_day: this.data.etd_day,
                    eta_day: this.data.eta_day
                };
                $.ajax({
                    url: '/admin/logistics/containeredit',
                    data: {
                        savedata: '',
                        data: dataupdate,
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (res) => {
                        if (res.status != 1) {
                            change_mes_type('.modal-body .alert', res.status)
                            $('.modal-body .alert').show()
                            $('.modal-body .alert p').html('*' + res.msg + '<br>')
                        } else {
                            change_mes_type('#headeralert', res.status)
                            $('#headeralert').show()
                            $('#headeralert p').html('*' + res.msg + '<br>')
                            $('#container_editModal').modal('hide')
                        }
                        this.isdisadble = false;
                    }
                })
            }
        },
        mounted() {
            this.getalldata();
            $('#container_editModal').on('hide.bs.modal', () => {
                if(localStorage.getItem("model")){
                    this.getalldata();
                    localStorage.removeItem("model");
                }
            })
            $('.ready_day').on('changeDate', (e) => {
                this.data.ready_day = this.$refs.ready_day.value;//准备时间
            });
            //开航时间
            $('.etd_day').on('changeDate', (e) => {
                this.data.etd_day = this.$refs.etd_day.value;
            });
            //抵达时间
            $('.eta_day').on('changeDate', (e) => {
                this.data.eta_day = this.$refs.eta_day.value;
            });

        }
    })
    $(document).ready(function () {
        var lang = $('#lang').text();
        var language = '';
        if (lang == 'pt') {
            language = 'pt-BR';
        } else if (lang == 'en') {
            language = 'en';
        } else {
            language = 'zh-CN';
        }
        //设置modal垂直居中,移动
        $('.form_datetime').datetimepicker({
            language: language, // en ,zh-CN, pt-BR
            format: 'yyyy-mm-dd',
            minView: 'month',
            weekStart: 0, //一周从哪一天开始
            todayBtn: 1, //底部会出现一个今天
            autoclose: true,//自动关闭
            todayHighlight: 1,//高亮今天日期
            startView: 2,//显示的视图
            forceParse: 1,//当选择器关闭的时候，是否强制解析输入框中的值
            showMeridian: 1
        });
    });
</script>
